<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>条件渲染</title>
		<script src="../js/vue.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"> </script>
	</head>
	<body>

		<div id='app'>
			<!-- 条件渲染案例 -->
			<ul>
				<li>当前显示状态{{show}}</li>
				<li v-if="show">是否显示该数据由show变量控制</li>
			</ul>
			<button @click="channageShow">点击我改变show的属性</button>
			<!-- 绑定json对象的案例 -->
			<div v-for="(data,index) in jsondata.sites">
			<ul>
				第{{index+1}}个数据
				<li>网站名称:{{data.name}}</li>
				<li>网站地址:{{data.url}}</li>
				<li>网站宣言:{{data.slogan}}</li>
			</ul>
			</div>

		</div>
		<script>
			new Vue({
				el: "#app",
				data: {
					show: true,
					jsondata: {
						"sites": [{
								"name": "菜鸟教程",
								"url": "www.runoob.com",
								"slogan": "学的不仅是技术，更是梦想！"
							},
							{
								"name": "google",
								"url": "www.google.com",
								"slogan": "大事情找我小事情自己解决！"
							},
							{
								"name": "微博",
								"url": "www.weibo.com",
								"slogan": "发的不仅是技术，更是梦想！"
							}
						]
					}

				},
				methods: {
					channageShow: function(event) {
						this.show = !this.show;
						alert(" 使用v-if 做条件渲染时会将dom节点kill")
					}

				}
			});
		</script>
	</body>
</html>
